﻿<!doctype html>
<html>
    <head>
    <title>SpreadJS - Array Formula</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <style type="text/css">
    /*css_begin*/

    /*css_end*/
    </style>
    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        var spreadNS = GcSpread.Sheets;
        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"), { sheetCount: 1 });
            initSpread(spread);
        });
        
        function initSpread(spread) {
            var fbx = new spreadNS.FormulaTextBox(document.getElementById('formulaBar'));
            fbx.spread(spread);

            var oldArrayRange;
            var arrayFormulaStyle = new spreadNS.Style();
            arrayFormulaStyle.backColor = "#E0E0FF";
            for (var i = 0; i < spread.sheets.length; i++) {
                (function (sheet1) {
                    sheet1.bind(spreadNS.Events.SelectionChanged, null, function (args) {
                        sheet1.isPaintSuspended(true);
                        var formulaBar = $("#formulaBar");
                        var formulaInfo = sheet1.getFormulaInformation(sheet1.getActiveRowIndex(), sheet1.getActiveColumnIndex());
                        if (oldArrayRange && (!formulaInfo || !formulaInfo.isArrayFormula || !formulaInfo.baseRange.equals(oldArrayRange))) {
                            for (var r = oldArrayRange.row; r < oldArrayRange.row + oldArrayRange.rowCount; r++) {
                                for (var c = oldArrayRange.col; c < oldArrayRange.col + oldArrayRange.colCount; c++) {
                                    sheet1.setStyle(r, c, null);
                                }
                            }
                            oldArrayRange = null;
                        }
                        if (formulaInfo && formulaInfo.hasFormula) {
                            var formula = "=" + formulaInfo.formula;
                            formula = formulaInfo.isArrayFormula ? "{" + formula + "}" : formula;
                            formulaBar.val(formula);
                            if (formulaInfo.isArrayFormula && !formulaInfo.baseRange.equals(oldArrayRange)) {
                                oldArrayRange = formulaInfo.baseRange;
                                for (var r = oldArrayRange.row; r < oldArrayRange.row + oldArrayRange.rowCount; r++) {
                                    for (var c = oldArrayRange.col; c < oldArrayRange.col + oldArrayRange.colCount; c++) {
                                        sheet1.setStyle(r, c, arrayFormulaStyle);
                                    }
                                }
                            }
                        }
                        else {
                            formulaBar.val(sheet1.getValue(sheet1.getActiveRowIndex(), sheet1.getActiveColumnIndex()));
                        }
                        sheet1.isPaintSuspended(false);
                    });
                })(spread.sheets[i]);
            }

            setBasic(spread.sheets[0]);
        };

        function setBasic(sheet) {
            sheet.setName("Simple");
            sheet.setArray(0, 0, [[1, 2, 3, 4, 5, 6], [4, 5, 6], [7, 8, 9], [10, 11, 12]]);

            sheet.addSpan(0, 7, 4, 3);
            sheet.setValue(0, 7, "Set array fomular by:\n 1st select the cell / range;\n 2nd enter the formula;\n last press Ctrl+Shift+Enter.");
            setDescriptionStyle(sheet.getCell(0, 7));

            sheet.setRowHeight(5, 40);
            sheet.addSpan(5, 0, 1, 3);
            sheet.setValue(5, 0, "Array formula use constants\n ex. ={1,2,3}*{4;5;6}");
            setDescriptionStyle(sheet.getCell(5, 0));
            sheet.setArrayFormula(6, 0, 3, 3, "={1,2,3}*{4;5;6}");

            sheet.addSpan(5, 4, 1, 3);
            sheet.setValue(5, 4, "Array formula use range\n ex. =A1:A4*A1:C1");
            setDescriptionStyle(sheet.getCell(5, 4));
            sheet.setArrayFormula(6, 4, 4, 3, "=A1:A4*A1:C1");

            sheet.addSpan(5, 8, 1, 4);
            sheet.setValue(5, 8, "Array formula use range & function\n ex. =SUM(A1:A4*A1:C1)");
            setDescriptionStyle(sheet.getCell(5, 8));
            sheet.setArrayFormula(6, 8, 4, 2, "=SUM(A1:A4*A1:C1)");

            sheet.setRowHeight(11, 40);
            sheet.addSpan(11, 0, 1, 4);
            sheet.setValue(11, 0, "Array formula copy column range\n ex. =A1:A2");
            setDescriptionStyle(sheet.getCell(11, 0));
            sheet.setArrayFormula(12, 0, 2, 3, "=A1:A2");

            sheet.addSpan(11, 5, 1, 3);
            sheet.setValue(11, 5, "Array formula copy row range\n ex. =A1:B1");
            setDescriptionStyle(sheet.getCell(11, 5));
            sheet.setArrayFormula(12, 5, 4, 2, "=A1:B1");

            sheet.setRowHeight(17, 40);
            sheet.addSpan(17, 0, 1, 4);
            sheet.setValue(17, 0, "Array formula out of range value is #N/A:\n ex. ={1,2,3}*{4;5;6}");
            setDescriptionStyle(sheet.getCell(17, 0));
            sheet.setArrayFormula(18, 0, 4, 4, "={1,2,3}*{4;5;6}");
        }

        function setDescriptionStyle(cell) {
            cell.wordWrap(true).backColor("Accent 5 80").vAlign(spreadNS.VerticalAlign.Center);
        }
        /*code_end*/
    </script>
    </head>
    <body>
    <div class="sample-turtorial">
        <div>
            <textarea id="formulaBar" readonly="readonly" style="width: 98%; margin: 6px"></textarea>
        </div>
        <div id="ss" style="width:100%; height:390px;border: 1px solid gray;"></div>
    </div>
    </body>
</html>